<template>
  <!-- 员工管理 -->
  <div class="boxs">

    <el-card shadow="always" :body-style="{ padding: '20px' }">

      <!-- 新写法->替换div -->
      <!-- <template #header></template> -->
      <div slot="header">
        <!-- 自己封装的工具栏组件 -->
        <!-- <PageTools> -->
        <!-- <el-tools> -->
        <PageTools>
          <template #left>
            <span>总记录数: {{ total }}条 - 混入变量：{{ xiaoyang }}</span>
          </template>
          <template #right>
            <el-button type="warning" @click="$router.push('/import')">导入excle</el-button>
            <el-button :loading="downloadLoading" type="danger" @click="exportData">导出excle</el-button>
            <el-button v-if="checkPoints('p-em-add')" type="primary" @click="show = true">新增员工</el-button>
          </template>
        </PageTools>
        <!-- </el-tools> -->
        <!-- </PageTools> -->
      </div>

      <!-- 页面主体 -->
      <!-- table列表 -->
      <!--
        1. 通过 Table 的 default-sort 属性设置默认的排序列和排序顺序
          说明: { prop: '指定按某一列进行排序', order: 'descending' }
        2. 排序方式：ascending 升序（从小到大）   descending 降序（从大到小）

        3.  el-table-column 组件身上添加 sortable 属性 开启了自排序（手动）
        说明: :sortable="true" = sortable

        关于数据排序：
        1. 前端排序 -> 假排序（拿到部分数据进行排序）
        2. 后端排序 -> 真排序（使用全部数据排序）
      -->
      <el-table border :data="list" :default-sort="{ prop: 'timeOfEntry', order: 'ascending' }">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="username" label="姓名" />
        <!-- 展示员工头像 -->
        <el-table-column prop="staffPhoto" label="头像">
          <template #default="{ row }">
            <el-image :src="row.staffPhoto" class="myPhoto" fit="fill" @click="openDraw(row.staffPhoto)" />
          </template>
        </el-table-column>
        <el-table-column sortable prop="workNumber" label="工号" />
        <el-table-column prop="formOfEmployment" label="聘用形式">
          <template #default="{ row }">
            {{ formatEmploy(row.formOfEmployment) }}
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" />
        <el-table-column sortable prop="timeOfEntry" label="入职时间">
          <template #default="{ row }">
            {{ formatTime(row.timeOfEntry) }}
          </template>
        </el-table-column>
        <el-table-column label="账户状态">
          <template #default="{ row }">
            <el-switch v-model="row.mg" />
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="280">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
            <el-button type="text" size="small" @click="openAssign(row.id)">分配角色</el-button>
            <el-button type="text" size="small" @click="DeleteEmployee(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          background
          :total="total"
          :current-page="query.page"
          :page-size="query.size"
          :page-sizes="[10, 2]"
          layout=" prev, pager, next, sizes"
          @current-change="changePage"
          @size-change="sizeChange"
        />
      </el-row>

    </el-card>

    <!-- 新增员工弹层 -->
    <AddEmploy :show="show" @close="show = false" />

    <!-- 员工头像二维码弹层 -->
    <el-dialog width="220px" title="头像二维码" :visible.sync="showPhoto">
      <!-- 绘制头像的二维码 -->
      <canvas ref="cv" />
    </el-dialog>

    <!-- 给员工分配角色弹层 -->
    <AssignRole ref="roles" :show-role-dialog.sync="showRoleDialog" />

  </div>
</template>

<script>
// import PageTools from '@/components/PageTools'
import { getEmployeeListApi, delEmployeeApi } from '@/api/employees'
// 1. 导入数据字典
import Types from '@/api/constant/employees'
// 引入 dayjs
import dayjs from 'dayjs'
// 导入新增员工的弹层
import AddEmploy from './components/add-employee.vue'
// 导入给员工分配角色组件
import AssignRole from './components/assign-role.vue'

// 导入转换二维数组的方法
import { transformTdata } from '@/utils'

import QrCode from 'qrcode'

export default {
  components: {
    // PageTools
    // ElTools // 局部注册
    AddEmploy,
    AssignRole
  },
  data() {
    return {
      showRoleDialog: false, // 控制员工分配角色弹层显隐
      showPhoto: false, // 控制头像二维码弹层显隐
      downloadLoading: false, // 导出 loading 效果
      show: false, // 控制新增员工弹层显隐
      Types, // 2. 存储数据字典
      list: [], // 保存员工数据
      total: 0, // 数据总条数

      // 获取员工列表查询条件
      query: {
        page: 1, // 当前页
        ize: 10 // 每页条数
      }

    }
  },

  mounted() {
    // console.log('员工组件实例: ', this)
    this.getEmployeeList()

    // 调用全局混入方法
    // this.checkPoints('我是全局混入的方法')
  },

  methods: {
    // 打开员工分配角色弹层  id: 员工id
    openAssign(id) {
      // 打开弹层
      this.showRoleDialog = true

      // 调用分配角色子组件方法->数据回填
      // this.$refs.roles === 等价于 分配角色子组件 this
      this.$refs.roles.getRolesById(id)
    },
    // 打开头像二维码弹层并绘制二维码
    openDraw(photoUrl) {
      /**
       * 1. 打开弹层
       * 2. 绘制二维码:
       *              dom 为一个 canvas 的 dom 对象, info 为转化二维码的信息
       *              语法: QrCode.toCanvas(dom, info)
       */
      this.showPhoto = true
      /**
       * 现象：vue 修改数据后，dom 渲染更新是异步->提升页面性能
       * 造成问题: 不能获取到异步更新的最新 dom
       * 解决: this.$nextTick(callback)
       */
      // console.log('canvas的dom对象：', this.$refs.cv)
      this.$nextTick(() => {
        // console.log('cb-canvas的dom对象：', this.$refs.cv, photoUrl)
        QrCode.toCanvas(this.$refs.cv, photoUrl)
        // QrCode.toCanvas(this.$refs.cv, 'https://qq.com') // 二维码生成->腾讯网
      })
    },

    // 导出员工信息->下载到本地电脑
    exportData() {
      this.downloadLoading = true
      // import('@/utils/Export2Excel') 异步懒加载模块
      // 因为: excel 导出代码量比较大而且功能使用频率不高，
      // 所以采用懒加载方式, 点击使用的时候采取加载这个模块
      import('@/utils/Export2Excel').then(excel => {
        // 核心: 准备 excel 表头和数据
        /**
         * 员工管理页面导出的数据：当前在el-table中显示的员工数据=》this.list
         */
        // 1. 准备导出数据的map对象：包含要导出员工信息的表头（中文属性名）和员工信息的表头（英文属性名）
        const maps = {
          '手机号': 'mobile',
          '姓名': 'username',
          '入职日期': 'timeOfEntry',
          '聘用形式': 'formOfEmployment',
          '工号': 'workNumber',
          '转正日期': 'correctionTime',
          '部门': 'departmentName'
        }
        // 2. 根据maps对象获取导出员工信息表头（中文属性名）
        const tHeader = Object.keys(maps) // 得到：['手机号', '姓名', '入职日期'...]
        // 3. 根据maps对象获取导出员工数据=> 把this.list 转换成二维数组（包含导出的员工数据）
        const data = transformTdata(this.list, Object.values(maps))
        console.log('转换后的员工数据的二维数组：', data)

        // 假数据
        // const tHeader = ['姓名', '性别', '期望薪资']
        // // 说明❓：二维数据
        // const data = [
        //   ['曹仁堂', '男', 18000],
        //   ['王晓阳', '男', 18000],
        //   ['杨瑭瑭', '女', 19000]
        // ]
        // == 使用excel.export_json_to_excel 方法实现导出 ==
        excel.export_json_to_excel({
          header: tHeader, // excel文件表头
          data, // 导出excel数据
          filename: `员工信息-${Math.random()}`, // 下载保存到本地电脑excel文件名
          autoWidth: true, // 单元格自适应
          bookType: 'xlsx' // 导出文件格式
        })
        this.downloadLoading = false
      })
    },

    // 格式化员工的入职时间
    formatTime(timeOfEntry) {
      return dayjs(timeOfEntry).format('YYYY年MM月DD日')
    },

    /**
     * 格式化聘用形式
     *
     * type:  1 代表正式员工   2 代表非正式员工
     */
    formatEmploy(type) {
      // console.log('数据字典：', this.Types.hireType, type)
      /**
       * 需求：怎么根据 type 从数据字典
       *                              [
       *                                {
       *                                  id: 1,
       *                                  value: '正式'
       *                                },
       *                                {
       *                                  id: 2,
       *                                  value: '非正式'
       *                                }
       *                              ]
       * 获取对应 ID 的 value 值
       *
       * 算法思路:
       *          1. 根据数据字典生成 map -> 映射关系
       *          2. 根据 map 结合 type 获取 value 值
       */
      const map = {}
      this.Types.hireType.forEach(item => {
        map[item.id] = item.value
      })
      // console.log('映射关系：', map, type)
      return map[type]
    },

    // 页码切换
    changePage(newPage) {
      this.query.page = newPage
      this.getEmployeeList()
    },
    // 每页显示条数切换
    sizeChange(size) {
      this.query.size = size
      this.getEmployeeList()
    },

    // 获取员工列表
    async getEmployeeList() {
      const { total, rows } = await getEmployeeListApi(this.query)
      // console.table(rows) // 打印表格
      this.total = total
      this.list = rows
    },

    // 删除员工
    DeleteEmployee(row) {
      console.log('当前点击删除的员工: ', row)

      this.$confirm('小比登，敢删除我?').then(async() => {
        await delEmployeeApi(row)

        this.getEmployeeList()
        this.$message.success('删除员工成功')
      }).catch(error => {
        console.log(error)
      })
    }

  }
}
</script>

<style lang="scss" scoped>
// 员工头像样式
.myPhoto {
  width: 80px;
  height: 80px;
  border-radius: 100%; // 设置盒子为圆形
}
</style>
